<template>
  <div>
    <el-table :data="roleList" 
    style="width: 100% ; margin-bottom:20px"
            node-key="id"
             border
            :tree-props="{ children: 'children', hasChildren:'hasChildren' }"
    >
      <el-table-column prop="id" label="角色编号" > </el-table-column>
      <el-table-column prop="rolename" label="角色名称" > </el-table-column>
      <el-table-column prop="status" label="状态"> 
        <template slot-scope = 'scope'>
          <div>
            <el-button type="primary" v-if="scope.row.status == 1">启 用</el-button>
            <el-button type="success" v-else>禁 用</el-button>
          </div>
        </template>
           
      </el-table-column>
      <el-table-column  label="操作"> 
        <template slot-scope="scope">
          <div>
              <el-button type="info" @click="edit(scope.row.id)">编 辑</el-button>
                <v-del @del="del(scope.row.id)"></v-del>
          </div>
        </template>
            
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import  {roleDel} from "../../../request/api.js"
import { successAlert, warningAlert } from "../../../utils/alert.js";
export default {
  props: [],
  components: {},
  data() {
    return {
    };
  },
  computed: {
    ...mapGetters({
      roleList:"role/list",
      
    }),
  },
  methods: {
    ...mapActions({
      asyncRoleList:"role/asyncList",
     
    }),
    del(id){
       roleDel({id:id}).then(res=>{
           if(res.data.code ==200){
             successAlert(res.data.msg)
             this.asyncRoleList()
           }else{
             warningAlert(res.data.msg) 
           }
        })
    },
    edit(id){
      this.$emit("edit",id)
    }
  },
  mounted() {
    this.asyncRoleList()
  },
};
</script>
<style scoped>
</style>